<div class="bjui-pageContent">
	<div class="pageFormContent" data-layout-h="0">
		<div class="bjui-doc">
			<h3 class="page-header">上传组件</h3>
			<blockquote>
				<p>本节主要介绍框架的上传组件功能。在本框架中，IE8-9使用uploadify组件上传，其余支持HTML5的浏览器使用HTML5上传，两种上传的API基本一致。</p>
			</blockquote>
			<h4>初始化</h4>
			<script type="text/javascript">
				function doc_upload_success(file, data) {
					var json = $.parseJSON(data)

					$(this).bjuiajax('ajaxDone', json)
					if (json[BJUI.keys.statusCode] == BJUI.statusCode.ok) {
						$('#doc_pic').val(json.filename)
						/*   $('#doc_span_pic').html('已上传图片：<img src="'+ json.filename +'" width="100">') */
					}
				}
			</script>
			<ul>
				<li>Data属性：div添加属性<code>data-toggle="upload"</code>后可触发上传组件。<br>
					<span class="label label-default">DOM示例：</span>
					<div style="display: inline-block; vertical-align: middle;">
						<div id="doc_pic_up" data-toggle="upload"
							data-uploader="http://localhost:8050/zhangzhi/upload.do"
							data-file-size-limit="1024000000"
							data-file-type-exts="*.jpg;*.png;*.doc;" data-multi="true"
							data-on-upload-success="doc_upload_success"
							data-icon="cloud-upload"
							data-drag-drop=true
							data-preview-img=false
							></div>
						<input type="hidden" name="doc.pic" value="" id="doc_pic">
					</div> <span id="doc_span_pic"></span> <br>
					<p>示例代码：</p> <pre class="brush: js; html-script: true">
                        &lt;script type="text/javascript">
                            function doc_upload_success(file, data) {
                                var json = $.parseJSON(data)
                                
                                $(this).bjuiajax('ajaxDone', json)
                                if (json[BJUI.keys.statusCode] == BJUI.statusCode.ok) {
                                    $('#doc_pic').val(json.filename)
                                    $('#doc_span_pic').html('已上传图片：&lt;img src="'+ json.filename +'" width="100">')
                                }
                            }
                        &lt;/script>
                        &lt;div style="display:inline-block; vertical-align:middle;">
                            &lt;div id="doc_pic_up" data-toggle="upload" data-uploader="doc/form/ajaxPic.html" 
                                data-file-size-limit="1024000000"
                                data-file-type-exts="*.jpg;*.png;*.gif;*.mpg"
                                data-multi="true"
                                data-on-upload-success="doc_upload_success"
                                data-icon="cloud-upload">&lt;/div>
                            &lt;input type="hidden" name="doc.pic" value="" id="doc_pic">
                        &lt;/div>
                        &lt;span id="doc_span_pic">&lt;/span>
                    </pre>
				</li>
				<li>jQuery API：<br> <pre class="brush: js">
                        $(div).uplopd(options)
                    </pre>
				</li>
			</ul>
			<h4>参数（options）</h4>
			<table class="table table-bordered table-striped table-hover">
				<thead>
					<tr>
						<th>名称</th>
						<th>类型</th>
						<th>默认值</th>
						<th>描述</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>uploader</td>
						<td>string</td>
						<td>null</td>
						<td>[必选] <span class="badge"><i>D-Url</i></span> 上传处理URL。
						</td>
					</tr>
					<tr>
						<td>formData</td>
						<td>object</td>
						<td>{}</td>
						<td>[可选] 发送到服务端的额外数据。</td>
					</tr>
					<tr>
						<td>fileTypeExts</td>
						<td>string</td>
						<td>*.jpg;*.png</td>
						<td>[可选] 限制上传文件类型，多个以<code>;</code>分隔。
						</td>
					</tr>
					<tr>
						<td>fileObjName</td>
						<td>string</td>
						<td>file</td>
						<td>[可选] 服务端接收到的file域名称。</td>
					</tr>
					<tr>
						<td>buttonText</td>
						<td>string</td>
						<td>选择上传文件</td>
						<td>[可选] 上传按钮的名称。</td>
					</tr>
					<tr>
						<td>auto</td>
						<td>boolean</td>
						<td>false</td>
						<td>[可选] 是否开启自动上传。</td>
					</tr>
					<tr>
						<td>multi</td>
						<td>boolean</td>
						<td>false</td>
						<td>[可选] 是否支持一次性选择多个上传文件。</td>
					</tr>
					<tr>
						<td>fileSizeLimit</td>
						<td>int</td>
						<td>204800</td>
						<td>[可选] 上传文件大小限制，单位 KB。</td>
					</tr>
					<tr>
						<td>onUploadSuccess</td>
						<td>function(file, data, $element)</td>
						<td>null</td>
						<td>[必选] 上传成功时的回调函数，data是服务端返回的JSON数据，$element是触发上传的jQuery对象。</td>
					</tr>
					<tr>
						<td>dragDrop</td>
						<td>boolean</td>
						<td>false</td>
						<td>[可选] <code>HTML5专用</code>是否开启拖动上传，开启后，将文件拖到按钮上即可上传。
						</td>
					</tr>
					<tr>
						<td>previewImg</td>
						<td>boolean</td>
						<td>true</td>
						<td>[可选] <code>HTML5专用</code>是否预览上传图片。
						</td>
					</tr>
					<tr>
						<td>previewLoadimg</td>
						<td>string</td>
						<td>null</td>
						<td>[可选] <code>HTML5专用</code>载入预览图片前显示的loading图标，previewImg=true时生效。
						</td>
					</tr>
					<tr>
						<td>icon</td>
						<td>string</td>
						<td>null</td>
						<td>[可选] <code>HTML5专用</code>上传按钮的图标。
						</td>
					</tr>
				</tbody>
			</table>
			<h4>回调函数的JSON参数</h4>
			<table class="table table-bordered table-striped">
				<thead>
					<tr>
						<th>名称</th>
						<th>类型</th>
						<th>描述</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>statusCode</td>
						<td>int</td>
						<td><strong>必选。</strong>状态码(ok = 200, error = 300, timeout =
							301)，可以在BJUI.init时配置三个参数的默认值。</td>
					</tr>
					<tr>
						<td>message</td>
						<td>string</td>
						<td><strong>可选。</strong>提示信息内容。</td>
					</tr>
					<tr>
						<td>filename</td>
						<td>string</td>
						<td><strong>可选。</strong>上传成功后的文件名称或路径。</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<div class="bjui-footBar">
		<ul>
			<li><button type="button" class="btn-close" data-icon="close">关闭</button></li>
		</ul>
	</div>
</div>